<script setup>
import { ref } from 'vue';

const activeTabId = ref('tab1');
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Tab Components</h1>
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Tab List</h3>
        <div class="flex flex-col space-y-6">
          <div>
            <TabList
              :activeid="activeTabId"
              @change="(tab) => console.debug('Tab changed:', tab.id)"
            >
              <Tab id="tab1" @click="activeTabId = 'tab1'">Tab 1</Tab>
              <Tab id="tab2" @click="activeTabId = 'tab2'">Tab 2</Tab>
              <Tab id="tab3" @click="activeTabId = 'tab3'">Tab 3</Tab>
            </TabList>
            <div class="mt-4 rounded-lg border p-4">
              <TabPanel id="tab1" v-show="activeTabId === 'tab1'">
                <p>Content for Tab 1</p>
                <p>This is the first tab panel.</p>
              </TabPanel>
              <TabPanel id="tab2" v-show="activeTabId === 'tab2'">
                <p>Content for Tab 2</p>
                <p>This is the second tab panel.</p>
              </TabPanel>
              <TabPanel id="tab3" v-show="activeTabId === 'tab3'">
                <p>Content for Tab 3</p>
                <p>This is the third tab panel.</p>
              </TabPanel>
            </div>
            <div class="mt-2">Active Tab: {{ activeTabId }}</div>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Tab Variations</h3>
        <div class="flex flex-col space-y-6">
          <div>
            <h4 class="mb-2 text-sm font-medium">Subtle Appearance</h4>
            <TabList appearance="subtle">
              <Tab id="subtle-tab1">Subtle Tab 1</Tab>
              <Tab id="subtle-tab2">Subtle Tab 2</Tab>
            </TabList>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Vertical Orientation</h4>
            <TabList orientation="vertical">
              <Tab id="vertical-tab1">Vertical Tab 1</Tab>
              <Tab id="vertical-tab2">Vertical Tab 2</Tab>
              <Tab id="vertical-tab3">Vertical Tab 3</Tab>
            </TabList>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Size Variations</h4>
            <div class="space-y-4">
              <TabList size="small">
                <Tab id="small-tab1">Small Tab</Tab>
                <Tab id="small-tab2">Small Tab</Tab>
              </TabList>

              <TabList size="medium">
                <Tab id="medium-tab1">Medium Tab</Tab>
                <Tab id="medium-tab2">Medium Tab</Tab>
              </TabList>

              <TabList size="large">
                <Tab id="large-tab1">Large Tab</Tab>
                <Tab id="large-tab2">Large Tab</Tab>
              </TabList>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Disabled Tab</h4>
            <TabList>
              <Tab id="enabled-tab">Enabled Tab</Tab>
              <Tab id="disabled-tab" disabled>Disabled Tab</Tab>
            </TabList>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
